<template>
    <div id="map">
        <canvas ref="canvas"></canvas>
    </div>
</template>

<script>
    import {toContext} from "ol/render";
    import {Circle, Fill, Stroke, Style} from "ol/style";
    import {LineString, Point, Polygon} from "ol/geom";

    export default {
        name: "CanvasRendererGeometryLayer",
        data() {
            return {};
        },
        mounted() {
            var canvas = this.$refs.canvas;
            //使用原生的canvas将其转化为canvas的上下文对象，并设置canvas的高宽
            var render = toContext(canvas.getContext("2d"), {size: [100, 100]});
            console.log(render);
            // 样式对象
            var fill = new Fill({
                color: 'blue'
            });
            var stroke = new Stroke({
                color: 'black'
            });
            var style = new Style({
                fill: fill,
                stroke: stroke,
                image: new Circle({
                    radius: 10,
                    fill: fill,
                    stroke: stroke
                })
            });

            render.setStyle(style);
            // render.drawPolygon(
            //   new Polygon([
            //     [
            //       [0, 0],
            //       [100, 100],
            //       [100, 0],
            //       [0, 0],
            //     ],
            //   ])
            // );
            // 在自定义canvas元素上绘制openlayers的图形
            render.drawGeometry(
                new LineString([
                    [10, 10],
                    [90, 90],
                ])
            );
            render.drawGeometry(
                new Polygon([
                    [
                        [2, 2],
                        [98, 2],
                        [2, 98],
                        [2, 2],
                    ],
                ])
            );
            render.drawGeometry(new Point([88, 88]));
        },
        methods: {},
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        z-index: 9999;
    }
</style>